<template>
	<view class="container">
		<view class="flex tip a-center">
			<u-icon name="volume-up" size="40"></u-icon>
			<view class="txt">已有20人成为了城市合作代理</view>
		</view>
		<view class="block">
			<view class="flex j-between a-center">
				<view class="title">*姓名</view>
				<view class="number">
					<u-input placeholder="请填写真实姓名"></u-input>
				</view>
			</view>
			<view class="split">
				<u-line length="654" color="#F2F2F2"></u-line>
			</view>
			<view class="flex j-between a-center">
				<view class="title">*手机号码</view>
				<view class="number">
					<u-input placeholder="请输入手机号"></u-input>
				</view>
			</view>
			<view class="split">
				<u-line length="654" color="#F2F2F2"></u-line>
			</view>
			<view class="flex j-between a-center">
				<view class="title">*验证码</view>
				<view class="number flex j-between a-center">
					<u-input placeholder="请输入验证码"></u-input>
					<view class="code" @tap="getCode">{{timer ? time+'S后重新获取':'获取验证码'}}</view>
				</view>
			</view>
		</view>
		<view class="block">
			<view class="flex j-between a-center">
				<view class="title">*所属地区</view>
				<view class="time flex j-end">
					<u-input placeholder="请选择地址" disabled=""></u-input>
					<u-icon name="arrow-right" color="#ccc" size="24"></u-icon>
				</view>
			</view>
		</view>
		<view class="submit flex j-center a-center">
			<view>提交申请</view>
		</view>
		<view style="height: 50rpx;"></view>
	</view>
</template>

<script>
export default{
	data(){
		return{
			time:60,
			timer:null,
		}
	},
	methods:{
		codeTime(){
			this.time--
			if(this.time > 0){
				this.timer = setTimeout(()=>{
					this.codeTime()
				},1000)
			}else{
				clearTimeout(this.timer)
				this.timer = null
				this.time = 60
			}
		},
		getCode(){
			if(!this.timer){
				this.codeTime()
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container{padding: 0 24rpx;}
.block{background-color: #FFF;padding: 32rpx 24rpx;border-radius: 16rpx;margin-top: 24rpx;
	.title{font-weight: bold;font-size: 32rpx;color: #333;}
	.types{margin-top: 32rpx;
		.item{padding: 12rpx 40rpx;color: #333;font-size: 28rpx;background-color: #F2F2F2;margin-right: 48rpx;}
		.active{color: #246FDD;background-color: rgba(36, 111, 221, .1);}
	}
	.number{width: 462rpx;font-size: 32rpx;
		.code{color: #246FDD;font-size: 28rpx;}
	}
	.time{width: 462rpx;}
	.split{margin: 24rpx 0;}
}
.tip{color: #246FDD;padding: 32rpx 24rpx;border-radius: 16rpx;background: rgba(36, 111, 221, .05);
	.txt{font-size: 28rpx;margin-left: 24rpx;}
}
.submit{height: 88rpx;color: #FFF;font-size: 32rpx;border-radius: 16rpx;background: #246FDD;
	margin-top: 48rpx;
}
</style>
